<template>
   <view>
      <uv-gap height="20" bgColor="#fff"></uv-gap>
      <uv-cell-group>
         <uv-cell
            :titleStyle="{ fontWeight: 500 }"
            @click="openPopup(item.popupData)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <uv-popup
         ref="uPopup"
         :safeAreaInsetBottom="true"
         :safeAreaInsetTop="true"
         :mode="popupData.mode"
         :round="popupData.round"
         :overlay="popupData.overlay"
         :closeable="popupData.closeable"
         :closeOnClickOverlay="popupData.closeOnClickOverlay"
         @change="change"
         @maskClick="maskClick"
      >
         <view
            class="uv-popup-slot"
            :style="{
               width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
               marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
            }"
         >
            <uv-button
               type="success"
               text="点我关闭"
               customStyle="width: 200rpx;color:#fff;"
               @click="close"
            ></uv-button>
         </view>
      </uv-popup>
   </view>
</template>

<script lang="ts" setup>
import type { UvPopupChangeEvent, UvPopupMethods } from '@toothdy/uvui-ts/components/uv-popup';
import { ref } from 'vue';

const uPopup = ref<UvPopupMethods>();

const popupData = ref({
   overlay: true,
   mode: 'top' as 'top' | 'right' | 'bottom' | 'left' | 'center',
   closeable: true,
   round: 0,
   closeOnClickOverlay: true,
});
const list = ref([
   {
      popupData: {
         overlay: true,
         mode: 'top',
         closeOnClickOverlay: true,
      },
      title: '顶部弹出',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'right',
         closeOnClickOverlay: true,
      },
      title: '右侧弹出',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'bottom',
         closeOnClickOverlay: true,
      },
      title: '底部弹出',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'left',
         closeOnClickOverlay: true,
      },
      title: '左侧弹出',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'center',
         closeOnClickOverlay: true,
      },
      title: '居中弹出',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'bottom',
         closeOnClickOverlay: true,
         round: 10,
      },
      title: '显示圆角',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'bottom',
         closeable: false,
         closeOnClickOverlay: false,
      },
      title: '禁止点击遮罩关闭',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png',
   },
   {
      popupData: {
         overlay: true,
         mode: 'bottom',
         closeable: true,
         closeOnClickOverlay: true,
      },
      title: '显示关闭按钮',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png',
   },
]);
const openPopup = (data: any) => {
   popupData.value = data;
   uni.$uv.sleep(10).then(() => {
      uPopup.value?.open();
   });
};
const close = () => {
   uPopup.value?.close();
};
const change = (e: UvPopupChangeEvent) => {
   console.log('改变弹窗状态', e);
};
const maskClick = () => {
   console.log('点击蒙层');
};
</script>

<style lang="scss" scoped>
.uv-popup-slot {
   height: 150px;
   @include flex;
   justify-content: center;
   align-items: center;
}
</style>
